Understanding the ::slotted() Pseudo-Element in CSS
The ::slotted() pseudo-element is used in Web Components to style elements that are passed into a shadow DOM via <slot>. Unlike ::part(), which styles internal elements exposed via the part attribute, ::slotted() targets content projected from outside the shadow DOM.
::slotted(selector)targets elements that are passed into a shadow DOM slot.It does not affect internal elements created inside the shadow DOM—only slotted (external) content.
You can style properties like
color,font,margin, andpaddingfor the slotted elements.Only the top-level elements of the slot can be targeted; nested elements inside the slotted content cannot be selected with
::slotted().
In this example, the ::slotted(.highlight) selector styles only the <p> element with class highlight that is passed into the <slot> of the shadow DOM. Other elements inside the shadow DOM remain unaffected.
::part()styles internal shadow DOM elements exposed via thepartattribute.::slotted()styles external elements projected into a shadow DOM slot.::part()allows more granular control over internal structure;::slotted()is limited to top-level slotted content.Use
::part()for theming internal parts and::slotted()for styling content passed from outside the component.